import { Image, Popover, Card, List, Tag } from "antd";
import "./index.less";
import React, { Children, useContext } from "react";

// import { useDrag } from "react-dnd";
import {
  cloneDeep,
  findContainerById,
  uniqueId,
  updatePrimaryKey,
} from "../../../../../lowCode/shared";
import { LowCodeDesignerContext } from "../../../../../lowCode/designer/Provider";
import useDesignerActions from "../../../../../lowCode/designer/useActions";
import { LowCodeContext } from "../../../../../lowCode/core/Provider";
import { useRequest } from "ahooks";
import { queryMaterialList } from "../../../../../api";

const StoreItem = ({ item }: any) => {
  const { currentDesigner } = useContext(LowCodeDesignerContext);
  const { updateDesigner, addMaterialToDesigner } = useDesignerActions();
  const { items } = useContext(LowCodeContext);

  return (
    <Popover
    placement='rightBottom'
    title={item.name}
    
    content={<div style={{width:300}}>
      <div>{item.description}</div>
      <Image src="http://static.xyb2b.com/images/a7acbd6ac47ec55bcf608dcf5725b93b.png"/>
    </div>}
    >
      <Card
      hoverable
      size='small'
      className="store-item"
      // title={item.name}
      onClick={() => {
        let _item = cloneDeep(item.schema);
        
        addMaterialToDesigner(_item)

      }}
      cover={
        <img
          alt="example"
          src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
        />
      }
    >
      <Card.Meta
        // avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />}
        // title={item.name}
        description={item.name}
      />
    </Card>
    </Popover>
  );
};
const Store = () => {
  const { data } = useRequest<any, any>(queryMaterialList);
  const dataSource = data ? data.data : [];
  return (
    <div style={{ padding: 10 }}>
      <List
        grid={{
          column: 2,
          gutter: 8,
        }}
        dataSource={dataSource}
        renderItem={(item: any) => {
          return (
            <List.Item key={item.id}>
              <StoreItem item={item} />
            </List.Item>
          );
        }}
      />
    </div>
  );
};
export default Store;
